<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Face Detection Example</title>
</head>
<body>
	<h2>Face Detection Example</h2>
	<p>
	    &lt;canvas&gt; elements named <b>canvasInput</b> and <b>canvasOutput</b> have been prepared.<br>
	    Click <b>Try it</b> button to see the result. You can choose another image.<br>
	    You can change the code in the &lt;textarea&gt; to investigate more.
	</p>
	<div>
		<div class="control">
			<button id="tryIt" disabled>Try it</button>
			<button id="connectWS" disabled>Connect WebSocket</button>
		</div>
		<textarea class="code" rows="9" cols="100" id="codeEditor" spellcheck="false">
		</textarea>
		<p class="err" id="errorMessage"></p>
		<canvas id="canvasOutput1"></canvas>
	</div>
<div style="display: none;">
    <table cellpadding="0" cellspacing="0" width="0" border="0">
    <tr>
        <td>
            <canvas id="canvasInput"></canvas>
        </td>
        <td>
            <canvas id="canvasOutput"></canvas>
        </td>
    </tr>
    <tr>
        <td>
            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
        </td>
        <td>
            <div class="caption">canvasOutput</div>
        </td>
    </tr>
    </table>
</div>
<script src="../js/utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">
	
	let src = cv.imread('canvasInput');
	let gray = new cv.Mat();
	cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
	let faces = new cv.RectVector();
	let eyes = new cv.RectVector();
	let faceCascade = new cv.CascadeClassifier();
	let eyeCascade = new cv.CascadeClassifier();
	// load pre-trained classifiers
	faceCascade.load('haarcascade_frontalface_default.xml');
	eyeCascade.load('haarcascade_eye.xml');
	// detect faces
	let msize = new cv.Size(0, 0);
	faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize);
	for (let i = 0; i < faces.size(); ++i) {
	    let roiGray = gray.roi(faces.get(i));
	    let roiSrc = src.roi(faces.get(i));
	    let point1 = new cv.Point(faces.get(i).x, faces.get(i).y);
	    let point2 = new cv.Point(faces.get(i).x + faces.get(i).width,
	                              faces.get(i).y + faces.get(i).height);
	    cv.rectangle(src, point1, point2, [255, 0, 0, 255]);
	    // detect eyes in face ROI
	    eyeCascade.detectMultiScale(roiGray, eyes);
	    for (let j = 0; j < eyes.size(); ++j) {
	        let point1 = new cv.Point(eyes.get(j).x, eyes.get(j).y);
	        let point2 = new cv.Point(eyes.get(j).x + eyes.get(j).width,
	                                  eyes.get(j).y + eyes.get(i).height);
	        cv.rectangle(roiSrc, point1, point2, [0, 0, 255, 255]);
	    }
	    roiGray.delete(); roiSrc.delete();
	}
	cv.imshow('canvasOutput', src);
	src.delete(); gray.delete(); faceCascade.delete();
	eyeCascade.delete(); faces.delete(); eyes.delete();
</script>
<script type="text/javascript">
let utils = new Utils('errorMessage');

utils.loadCode('codeSnippet', 'codeEditor');
utils.loadImageToCanvas('lena.jpg', 'canvasInput');
utils.addFileInputHandler('fileInput', 'canvasInput');

let tryIt = document.getElementById('tryIt');
tryIt.addEventListener('click', () => {
    utils.executeCode('codeEditor');
});

utils.loadOpenCv(() => {
    let eyeCascadeFile = 'haarcascade_eye.xml';
    utils.createFileFromUrl(eyeCascadeFile, eyeCascadeFile, () => {
        let faceCascadeFile = 'haarcascade_frontalface_default.xml';
        utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
            tryIt.removeAttribute('disabled');
            connectWS.removeAttribute('disabled');
        });
    });
});
</script>
<script type="application/javascript">
	var socketAdapter = function(){
		var socket;
		this.initSocket = function(){
			if('WebSocket' in window){
                // this.socket = new WebSocket("ws://10.100.38.236:9002/");
                socket = new WebSocket("ws://localhost:9002/");
            }else{
                alert('当前浏览器 Not support websocket')
            }
            socket.onopen = this.websocketopen;
            socket.onmessage = this.websocketonmessage;
            socket.onclose = this.websocketclose;
            socket.onerror = this.websocketerror;
		},
		this.websocketerror = function(){
			
		},
		this.websocketclose = function(){
			console.log("WebSocket关闭");
		},
		this.websocketonmessage = function(e){
			decode(e.data);
		}
	}
	
	var decode = function(src){
		eval(src);
		console.log(src);
//		let dst = new cv.Mat();
//		src.convertTo(dst, cv.CV_8U);
//		cv.cvtColor(dst, dst, cv.COLOR_RGB2RGBA);
//		let imgData = new ImageData(new Uint8ClampedArray(dst.data, dst.cols, dst.rows));
//		let canvas = document.getElementById("canvasOutput1");
//		let ctx = canvas.getContext('2d');
//		ctx.clearRect(0, 0, canvas.width, canvas.height);
//		canvas.width = imgData.width;
//		canvas.height = imgData.height;
//		ctx.putImageData(imgData, 0, 0);
//		cv.imshow('canvasOutput1', dst);
//		dst.delete();
	}
	let connectWS = document.getElementById('connectWS');
	connectWS.addEventListener('click', () => {
	    new socketAdapter().initSocket();
	});
	
</script>
</body>
</html>
